<template>
    <s-layout title="出行人管理">
        <!-- 标题栏 -->
        <view class="list">
            <view class="card" v-for="(item,index) in state.list" :key='index'>
                <view class="left">
                    <view class="title">
                        <text class='name'>{{item.realName}}</text>
                        <text class="iconfont" :class='item.gander==0?"icon-nv":"icon-nan"'></text>
                    </view>
                    <view class="id">{{item.mobile}} | {{item.cardId}}</view>
                </view>
                <view class="iconfont icon-cangpeitubiao_xiugaixiugaiziliao" @click="navTo('/pages/traveler/edit?id='+item.id)"></view>
            </view>
        </view>
        <s-empty v-if="state.list.length === 0 && !state.loading" text="暂无出行人" icon="/static/data-empty.png" />
        <view class="pos iconfont icon-jiahao1" @click="navTo('/pages/traveler/edit')"></view>
    </s-layout>
</template>

<script setup>
import { reactive, onBeforeMount } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import sheep from '@/sheep';
import { isEmpty } from 'lodash';

const state = reactive({
    list: [],
    loading: true,
});
onShow(async () => {
    state.list = (await sheep.$api.user.trip.list()).data;
    state.loading = false;
});

onBeforeMount(() => {
    if (!!uni.getStorageSync('areaData')) {
        return;
    }
    // 提前加载省市区数据 
    sheep.$api.data.area().then((res) => {
        if (res.code === 1) {
            uni.setStorageSync('areaData', res.data);
        }
    });
});
function navTo(url) {
    uni.navigateTo({
        url
    })
}
</script>

<style lang="scss">
.list {
    padding: 20rpx;

    .card {
        padding: 40rpx;
        margin-bottom: 40rpx;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        background-color: #fff;

        .title {
            margin-bottom: 20rpx;

            .name {
                font-size: 36rpx;
                font-weight: bold;
            }

            .iconfont {
                margin-left: 10rpx;
            }

            .icon-nv {
                color: pink;
            }

            .icon-nan {
                color: skyblue;
            }
        }
    }
}

.icon-jiahao1 {
    background-color: var(--ui-BG-Main);
    color: #fff;
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    font-size: 36rpx;
    font-weight: bold;
    position: fixed;
    right: 40rpx;
    bottom: 120rpx;
    text-align: center;
    line-height: 80rpx;
}
</style>